<template>
  <div class="box-0">
    <el-card class="box-3">
      <div class="picker">
        <el-date-picker
          v-model="date"
          type="date"
          @change="getData"
        ></el-date-picker>
      </div>
      <div id="chart" style="width: 1300px; height: 400px"></div>
    </el-card>
    <el-card class="box-5">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="rank" label="排名" width="100" />
        <el-table-column prop="province" label="省份" width="130" />
        <el-table-column prop="city" label="城市" width="150" />
        <el-table-column prop="cinemaName" label="影院名称" width="200" />
        <el-table-column
          prop="box_office"
          label="票房（万）"
          width="120"
          sortable
        />
        <el-table-column
          prop="avg_people"
          label="场均人次"
          width="120"
          sortable
        />
        <el-table-column
          prop="cinemaSession"
          label="场次"
          width="100"
          sortable
        />
        <el-table-column
          prop="avg_price"
          label="平均票价"
          width="120"
          sortable
        />
        <el-table-column prop="currentDate" label="当天日期" width="180" />
      </el-table>
      <div class="fenye">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :background="true"
          layout="prev, pager, next,jumper"
          :total="500"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </div>
</template>
<script>
import * as echarts from "echarts";
//import walden from '../echarts/theme/walden'
export default {
  data() {
    return {
      date: new Date("2023-04-10"),
      chart: null,
      chartData: null,
      tableData: [],
    };
  },
  mounted() {
    this.chart = echarts.init(document.getElementById("chart"));
    this.getData();
    this.getPageData(1, 10);
  },
  methods: {
    getData() {
      const date = this.date;
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, "0");
      const day = String(date.getDate()).padStart(2, "0");
      const dateStr = `${year}-${month}-${day}`;
      this.$http.get("/cinema/v1/dateSell/" + dateStr).then((response) => {
        this.chartData = response.data;
        console.log(this.chartData);
        this.drawChart();
      });
    },
    drawChart() {
      this.data = this.chartData;
      if (!this.data) return;
      const top5Data = this.chartData
        .sort((a, b) => b.totalSession - a.totalSession)
        .slice(0, 10);
      const seData = this.chartData.map((item) => ({
        ...item,
        totalSession: item.totalSession / 10000,
      }));
      const option = {
        title: {
          text: "不同省市每日票房统计",
          left: "left",
          textStyle: {
            color: "#333",
          },
        },
        textStyle: {
          fontFamily: "Arial, Verdana, sans-serif",
          fontSize: 14,
        },
        color: [
          "#37a2da",
          "#67e0e3",
          "#9fe6b8",
          "#ffdb5c",
          "#ff9f7f",
          "#e062ae",
          "#e690d1",
          "#e7bcf3",
          "#9d96f5",
          "#8378eb",
        ],
        //theme: walden,
        legend: {
          data: ["总票房", "总人次", "总场次"],
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          data: this.data.map((item) => item.province),
          boundaryGap: true,
          axisLabel: {
            interval: 0, //控制X轴刻度全部显示
            rotate: 45, //倾斜角度
          },
        },
        yAxis: [
          {
            type: "value",
            name: "总票房/千元",
            position: "left",
          },
          {
            type: "value",
            name: "总人次/万",
            position: "right",
          },
        ],
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          show: false,
          containLabel: true,
        },
        series: [
          {
            name: "总场次",
            type: "pie",
            radius: "40%",
            center: ["70%", "45%"],
            label: {
              normal: {
                formatter: "{b}: {d}%",
                textStyle: {
                  fontWeight: "normal",
                  fontSize: 12,
                },
              },
            },
            data: top5Data.map((item) => ({
              name: item.province,
              value: item.totalSession,
            })),
          },
          {
            name: "总票房",
            data: this.data.map((item) => item.totalSell),
            type: "bar",
            yAxisIndex: 0, // 使用第一个y轴
            // label:{
            //   show:true,
            //   position:'top',
            //   formatter:'{b}:{c}'

            // }
          },
          {
            name: "总场次",
            data: seData.map((item) => item.totalSession),
            type: "bar",
            yAxisIndex: 1, // 使用第一个y轴
          },
          {
            name: "总人次",
            data: this.data.map((item) => item.totalPeople),
            type: "line",
            yAxisIndex: 1, // 使用第二个y轴
          },
        ],
      };
      this.chart.setOption(option);
    },
    handleSizeChange(pageSize) {
      //选择每一页记录数
      this.pageSize = pageSize;
      this.getPageData(this.currentPage, this.pageSize);
      console.log("size:", pageSize);
    },
    handleCurrentChange(pageNum) {
      //切换页号得到当前页码
      this.currentPage = pageNum;
      this.getPageData(this.currentPage, this.pageSize);
      console.log("num:", pageNum);
    },
    getPageData(num, size) {
      //获取分页数据
      let params = { pageNum: num, pageSize: size };
      console.log("请求参数：", params); // 打印请求参数
      this.$http.get("/cinema/v1/sellInfo", { params }).then((response) => {
        console.log(response.data);
        this.pageInfo = response.data;
        this.tableData = this.pageInfo;
        console.log(this.tableData);
      });
    },
  },
};
</script>
<style scoped>
.picker {
  display: flex;
  align-items: center;
  margin-left: auto;
  flex-shrink: 0;
  width: 100%;
  max-width: 200px;
}
.chart {
  width: 200%;
  height: 300px;
}
.box-3 {
  width: 98%;
  margin-left: 16px;
  margin-top: 10px;
  /* height: 65px; */
}
.box-4 {
  width: 98%;
  margin-left: 16px;
  margin-top: 10px;
  /* height: 65px; */
}
.box-5 {
  width: 98%;
  margin-left: 16px;
  margin-top: 10px;
}
.box-0 {
  overflow-y: auto;
  background-color: gainsboro;
  width: 100%;
}
</style>